<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>total</title>
<link rel="stylesheet" type="text/css"
	href="../assets/tema1/css/report.css" media="screen">

<script type="text/javascript" src="../../../../lib/jquery/jquery.js"></script>
<script type="text/javascript">

function ReportGrid(){
	this.columns = [];
	this.dataProvider = [];
	this.titulo = "";
}

ReportGrid.prototype.setTitulo = function(ptitulo){	
	this.titulo = ptitulo;
};
ReportGrid.prototype.setColumns = function(columns){	
	this.columns = columns;
};
ReportGrid.prototype.setDataProvider = function(dta){
	this.dataProvider = dta;
};

ReportGrid.prototype.refreshGridDate = function(){
	var dpt = this.dataProvider.length;	
	var ctm = this.columns.length;
	var gridhtml = $("#rep1").find(".boxLines");
	
	gridhtml.find(".ziber,.noziber").remove();
	var htmlL = "";
	for(var z=0;z<dpt;z++){
		var item  =  this.dataProvider[z];
		var ze = " noziber";
		if(z%2 > 0){
			ze = " ziber";
		}
		htmlL += '<div class="line'+ze+'" id="ind_'+z+'">';		
		for(var y=0;y<ctm;y++){		
			htmlL += '<label style="width:'+this.columns[y].width+'px">'+item[this.columns[y].column]+'</label>'; 
		}		
		htmlL += '</div>'; 
	}	
	$("#titlu").text(this.titulo);
	$("#tgg").text(dpt);
	gridhtml.append(htmlL);	
};





ReportGrid.prototype.refresh = function(){
	var dpt = this.dataProvider.length;	
        var gridhtml = $("#rep1").find(".boxLines");        
               
        var lastwidth = parseInt( gridhtml.width());
        
        lastwidth-=100;   
               
               
        if(this.columns.length==0){
		if(dpt>0){
		  var exem  =  this.dataProvider[0];
		  var perct = 200;
                  for( attr in exem ){  
                        this.columns[ this.columns.length ]   = {"label":attr,"column":attr,"width":perct+"px"};
                        lastwidth-=perct;
                  }
                  lastwidth+=perct;
		}
	}else{
            var crm = this.columns.length;
            for(var z=0;z<crm;z++){		
                lastwidth -= this.columns[z].width; 
            }
            lastwidth += this.columns[crm-1].width;
        }
	
	var ctm = this.columns.length;       
       
        this.columns[ctm-1]["width"] = lastwidth-2; 
        
        //alert("lastwidth:"+lastwidth);
        var htmlL = '';
	if(ctm>0){		
		gridhtml.find("> div").remove();
		htmlL = '<div class="line head">';		
		for(var y=0;y<ctm;y++){		
			htmlL += '<label style="width:'+this.columns[y].width+'px"><span>'+this.columns[y].label+'</span><a href="#"></a></label>'; 
		}		
		htmlL += '</div>'; 		
        }
	gridhtml.append(htmlL);	
	this.refreshGridDate();	
};
/*
$(function(){
	rep = new ReportGrid();
	rep.setTitulo("relatorio x");
	rep.setDataProvider([{"idT":10,"laa":11,"obs":"sozelin"},{"idT":2,"laa":787,"obs":"hshshss"},{"idT":5,"laa":1,"obs":"desde ye"},{"idT":3,"laa":14,"obs":"myllon"},{"idT":1,"laa":7877,"obs":"no hash"}]);
	
	rep.setColumns([ 
	                                       {"label":"cod","column":"idT","width":111},
	                                       {"label":"descricao","column":"laa","width":150},
	                                       {"label":"obs","column":"obs","width":111}
	                                       ]);
	
	rep.refresh();
});
*/

function setGrid(opt){
	
	
	
	var opts = {"dataProvider":[],"columns":[]};
	
	opts["dataProvider"] = $.extend(true,[],opt["dataProvider"]);
	opts["columns"] = $.extend(true,[],opt["columns"]);
	
	
	
	
	
	
	
	//alert(opt.msg);
	var rep = new ReportGrid();
	rep.setTitulo("opt.titulo");
	
	rep.setColumns(opt.columns);
	rep.setDataProvider([{"idT":10,"laa":11,"obs":"sozelin"},{"idT":2,"laa":787,"obs":"hshshss"},{"idT":5,"laa":1,"obs":"desde ye"},{"idT":3,"laa":14,"obs":"myllon"},{"idT":1,"laa":7877,"obs":"no hash"}]);
	
	
	//rep.setDataProvider(opt.dataProvider);
	/*
	rep.setColumns([ 
	                                       {"label":"cod","column":"idT","width":111},
	                                       {"label":"descricao","column":"laa","width":150},
	                                       {"label":"obs","column":"obs","width":111}
	                                       ]);
	*/
	rep.refresh();
}


</script>

</head>
<body>
	<h2 id="titlu" style="width: 100%; text-align: center">Titulo</h2>
	<div id="rep1" class="reportbody">
		<div class="boxLines" style="width: 100%">
			<div class="line head">
				<label style="width: 80%">produto</label> <label style="width: 19%">total</label>
			</div>
		</div>

		<div class="line foot">
			<label style="width: 80%">total geral</label> <label
				style="width: 19%" id="tgg"></label>
		</div>
	</div>
</body>
</html>